<template>
    <view class="w-[350px] m-auto mb-2 text-[9px] color-[#999] flex flex-col gap-1">
        <view class="flex justify-between">
            <view class="service-requirement text-[24rpx]">服务对象个性化要求：{{ serviceRequirement }}</view>
            <view class="service-times flex items-center">
                <text class="text-[24rpx]">服务次数：</text>
                <nut-input-number v-model="goodsStore.times" />
                <!-- <view class="counter">
                    <view class="counter-button" @click="decreaseServiceTimes">-</view>
                    <input type="number" v-model="serviceTimes" disabled />
                    <view class="counter-button" @click="increaseServiceTimes">+</view>
                </view> -->
            </view>
        </view>
        <view class="flex justify-end text-[24rpx]">预收费：¥{{ goodsStore.totalFee }}</view>
    </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { InputNumber } from '@nutui/nutui-taro'
import { useAuthStore, useGoodsStore } from '@/store';
import { getLastTimeStr, getListTimeStr } from './tooler';

const goodsStore = useGoodsStore();
const times = ref(1);
const tableData = ref([
    {
        category: '西药',
        name: '氯化钠注射液',
        model: '0.9%',
        specification: '500ml',
        material: '塑料品',
        unitPrice: 5.0,
        quantity: 3,
        subtotal: 15.0
    }
]);

const props = defineProps({
  preCharge: {
    type: Number,
    required: true
  }
})

const serviceRequirement = ref('无');
const serviceTimes = ref(1);
// const preCharge = ref(0);

const decreaseServiceTimes = () => {
    if (serviceTimes.value > 1) {
        serviceTimes.value--;
    }
};

const increaseServiceTimes = () => {
    serviceTimes.value++;
};
defineExpose({
  getPrice() {
    return props.preCharge;
  },
  getTimes(){
    return times.value;
  }
})
</script>

<style scoped>
.container {
    padding: 12rpx;
    background: #f0f0f0;
    width: 100%;
    box-sizing: border-box;
}

/*
.{
    border: 1rpx solid #ccc;
    border-radius: 10rpx;
    overflow: hidden;
    margin: 10rpx;
}*/

.table-header,
.table-row {
    display: flex;
    min-height: 80rpx;
    align-items: center;
    justify-content: space-between;
}

.table-cell {
    flex: 1;
    padding: 10rpx;
    border-bottom: 1rpx solid #ccc;
    border-right: 1rpx solid #ccc;
    text-align: center;
}

.table-header {
    background-color: #f5f5f5;
    font-weight: bold;
}

.table-row:last-child.table-cell {
    border-bottom: none;
}

.table-row:last-of-type.table-cell:last-child {
    border-right: none;
}

.service-info {
    margin-top: 20rpx;
}

.service-requirement {
    margin-bottom: 10rpx;
}

.service-times {
    display: flex;
    align-items: center;
    margin-bottom: 10rpx;
}

.counter {
    display: flex;
    margin-left: 10rpx;
}

.counter-button {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1rpx solid #ccc;
    background-color: #f5f5f5;
}

.pre-charge {
    font-weight: bold;
}
</style>